<template>
	<div>
		<div class="qr-con">
			<div class="qrcode" ref="qrCode"></div>
			<div class="right-info">
				<div>业务名称: {{ assetInfo.proName }}</div>
				<div>负责人: {{ assetInfo.proLeaderName }}</div>
				<div>主机名: {{ assetInfo.hostName }}</div>
				<div>主机中文名: {{ assetInfo.hostNameCn }}</div>
				<div>安全区域: {{ assetInfo.safeZoneName }}</div>
				<div>上架日期: {{ assetInfo.proName }}</div>
			</div>
		</div>
		<div style="text-align: center">
			<el-button type="primary" size="small" @click="showInfo">打印二维码</el-button>
			<div style="font-size: 16px;font-family: PingFang SC;font-weight: 400;color: #999999">
				若需查看或打印单个二维码请前往详情页
			</div>
		</div>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {
		name: 'QRCodeInfo',
		props: {
			assetInfo: {
				type: Object,
				default: () => {
					return {
						proName: 'XXXX',
						proLeaderName: 'XXXX',
						proLeaderName: 'XXXX',
						hostName: 'XXXX',
						hostNameCn: 'XXXX',
						safeZoneName: 'XXXX',
					}
				},
			},
		},
		data() {
			return {}
		},
		mounted() {
			this.createQRCode()
		},
		methods: {
			createQRCode() {
				let qrcode = new QRCode(this.$refs.qrCode, {
					text: 'Hellow QRCode!',
					width: 180,
					height: 180,
					// colorDark: "green", // 二维码颜色
					colorLight: '#ffffff', // 二维码背景色
					correctLevel: QRCode.CorrectLevel.H, // 容错率,L:容错率为 7%;M:容错率为 15%;Q:容错率为 25%;H:容错率为 30%. PS:容错级别越高抗残破或遮挡的能力就越强
				})
				// qrcode.clear(); // 清除二维码
				// qrcode.makeCode("https://blog.csdn.net/jinse29?type=blog"); // 设置二维码内容，可跳转链接
			},
			showInfo() {},
		},
	}
</script>

<style lang="scss" scoped>
	.qr-con {
		display: flex;
		flex-direction: row;
	}

	.right-info {
		margin-left: 40px;
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;

		div {
			margin-bottom: 12px;
		}
	}
</style>
